<template>
  <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
      <div style="padding: 10px" :key="key">
      <el-form label-position="left" label-width="70px" v-model="detail">
        <el-form-item label="背景色">
            <el-color-picker v-model="detail.background" @active-change="updateBackground" show-alpha size="small"></el-color-picker>
          </el-form-item>
        <el-form-item  label="字体">
               <el-select v-model="detail.fontFamily" placeholder="Arial" size="mini">
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
                <el-option label="Arial" value="Arial"/>
                <el-option label="Verdana" value="Verdana"/>
                <el-option label="Georgia" value="Georgia"/>
                <el-option label="Times New Roman" value="Times New Roman"/>
                <el-option label="Impact" value="Impact"/>
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
              </el-select>
        </el-form-item>
        <el-form-item  label="字号">
            <el-input-number v-model="detail.fontSize" :min="0" :max="100" size="mini"></el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="detail.color" @active-change="updateColor" show-alpha size="small"></el-color-picker>
        </el-form-item>
        <el-form-item  label="对齐方式">
               <el-select v-model="detail.textAlign" placeholder="Arial" size="mini">
                <el-option label="居中" value="center"/>
                <el-option label="左对齐" value="left"/>
                <el-option label="右对齐" value="right"/>
              </el-select>
        </el-form-item>
        <el-divider content-position="center">阴影1</el-divider>
        <el-form-item label="偏移量">
          <el-input-number v-model="detail.textShadow1W" :min="-20" :max="20" size="mini"></el-input-number>
        </el-form-item>
        <el-form-item label="宽度">
          <el-input-number v-model="detail.textShadow1B" :min="0" size="mini"></el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="detail.textShadow1C" @active-change="updateShadowColor1" show-alpha size="small"></el-color-picker>
        </el-form-item>
        <el-divider content-position="center">阴影2</el-divider>
        <el-form-item label="偏移量">
          <el-input-number v-model="detail.textShadow2W" :min="-20" :max="20" size="mini"></el-input-number>
        </el-form-item>
        <el-form-item label="宽度">
          <el-input-number v-model="detail.textShadow2B" :min="0" size="mini"></el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="detail.textShadow2C" @active-change="updateShadowColor2" show-alpha size="small"></el-color-picker>
        </el-form-item>
      </el-form>
      </div>
  </el-drawer>
</template>

<script>

export default {
  data () {
    return {
      key: 1,
      drawer: false
    }
  },
  methods: {
    updateBackground (val) {
      this.detail.background = val
    },
    updateColor (val) {
      this.detail.color = val
    },
    updateShadowColor1 (val) {
      this.detail.textShadow1C = val
    },
    updateShadowColor2 (val) {
      this.detail.textShadow2C = val
    }
  },
  computed: {
    detail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail
    }
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
